<template>
    <div class="content_drawer">
        <!-- form表单 -->
        <div class="content_drawer_form">
            <leaveForm
                v-if="formName == 'leaveForm'"
                ref="form"
                :remark="remark"
            />
            <tenderForm v-else-if="formName == 'tenderForm'" ref="form" />
            <tenderBuyForm v-else-if="formName == 'tenderBuyForm'" ref="form" />
            <projectForm v-else-if="formName == 'projectForm'" ref="form" />
            <tenderEnsureForm
                v-else-if="formName == 'tenderEnsureForm'"
                ref="form"
            />
            <saleOrderForm v-else-if="formName == 'saleOrderForm'" ref="form" />
            <purchaseForm v-else-if="formName == 'purchaseForm'" ref="form" />
            <saleInvoiceForm
                v-else-if="formName == 'saleInvoiceForm'"
                ref="form"
            />
            <recOrderForm v-else-if="formName == 'recOrderForm'" ref="form" />
            <payOrderForm v-else-if="formName == 'payOrderForm'" ref="form" />
            <payBackForm v-else-if="formName == 'payBackForm'" ref="form" />
            <recBackForm v-else-if="formName == 'recBackForm'" ref="form" />
            <payInvoiceForm
                v-else-if="formName == 'payInvoiceForm'"
                ref="form"
            />
            <procureContract
                v-else-if="formName == 'procureContract'"
                ref="form"
            />
            <saleContract v-else-if="formName == 'saleContract'" ref="form" />
            <quotation v-else-if="formName == 'quotation'" ref="form" />
            <price v-else-if="formName == 'price'" ref="form" />
            <profit v-else-if="formName == 'profit'" ref="form" />
            <Loss v-else-if="formName == 'Loss'" ref="form" />
            <BOM v-else-if="formName == 'BOM'" ref="form" />
            <assemble v-else-if="formName == 'assemble'" ref="form" />
            <inquiry v-else-if="formName == 'inquiry'" ref="form" />
            <purchaseQuotation
                v-else-if="formName == 'purchaseQuotation'"
                ref="form"
            />
            <In v-else-if="formName == 'In'" ref="form" />
            <out v-else-if="formName == 'out'" ref="form" />
            <supplier v-else-if="formName == 'supplier'" ref="form" />
            <customer v-else-if="formName == 'customer'" ref="form" />
            <div v-else>暂无数据</div>
        </div>
        <!-- 时间线 -->
        <div class="content_drawer_timeLine">
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :color="activity.colorAndStatus.color"
                >
                    <div>
                        {{ activity.content }}
                        <span
                            :style="{ color: activity.colorAndStatus.color }"
                            >{{ activity.colorAndStatus.status }}</span
                        >
                    </div>
                    <div class="item_permission">{{ activity.permission }}</div>
                    <div
                        v-if="activity.colorAndStatus.remark"
                        class="item_permission"
                    >
                        备注：{{ activity.colorAndStatus.remark }}
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
import leaveForm from "./leaveForm.vue";
import tenderForm from "./tenderForm.vue";
import tenderBuyForm from "./tenderBuyForm.vue";
import tenderEnsureForm from "./tenderEnsureForm.vue";
import projectForm from "./projectForm.vue";
import saleOrderForm from "./saleOrder/index.vue";
import recOrderForm from "./recOrder/index.vue";
import recBackForm from "./recBack/index.vue";
import payOrderForm from "./payOrder/index.vue";
import payBackForm from "./payBack/index.vue";
import saleInvoiceForm from "./saleInvoice/index.vue";
import payInvoiceForm from "./payInvoice/index.vue";
import purchaseForm from "./purchase";
import procureContract from "./procureContract";
import saleContract from "./saleContract";
import quotation from "./quotation";
import price from "./price";
import profit from "./profit";
import Loss from "./Loss";
import BOM from "./BOM";
import assemble from "./assemble";
import inquiry from "./inquiry";
import purchaseQuotation from "./purchaseQuotation";
import out from "./out";
import In from "./in";
import supplier from "./supplier";
import customer from "./customer";

export default {
    props: ["remark", "activities"],
    components: {
        leaveForm,
        tenderForm,
        tenderBuyForm,
        tenderEnsureForm,
        projectForm,
        saleOrderForm,
        purchaseForm,
        saleInvoiceForm,
        recOrderForm,
        payOrderForm,
        payInvoiceForm,
        payBackForm,
        recBackForm,
        procureContract,
        saleContract,
        quotation,
        price,
        profit,
        Loss,
        BOM,
        assemble,
        inquiry,
        purchaseQuotation,
        supplier,
        out,
        In,
        customer,
    },
    data() {
        return {};
    },
    computed: {
        isTask() {
            return this.$store.state.workflow.formType.includes("task");
        },
        type() {
            return this.$store.state.workflow.formType;
        },
        businessConfig() {
            return this.$store.state.workflow.businessConfig;
        },
        formName() {
            let menuId = this.businessConfig.menuId;
            console.log("menuId", menuId, this.businessConfig.businessType);
            switch (menuId) {
                case "20240526510352512973410305":
                    return "leaveForm";
                case "401":
                    return "tenderForm";
                case "402":
                    return "tenderBuyForm";
                case "404":
                    return "tenderEnsureForm";
                case "1501":
                    return "projectForm";
                case "702":
                    return "saleOrderForm";
                case "801":
                    return "purchaseForm";
                case "20240626521522631699206145":
                    return "saleInvoiceForm";
                case "20240627521854807313616897":
                    return "payInvoiceForm";
                case "20240627521863854976798721":
                    return "recOrderForm";
                case "20240627521864057435852801":
                    return "payOrderForm";
                case "20240720530274700945920001":
                    return "recBackForm";
                case "20240720530274855094980609":
                    return "payBackForm";
                case "20240602512863260635172865":
                    return "procureContract";
                case "20240602512863443204837377":
                    return "saleContract";
                case "20240802534757610084241409":
                    return "quotation";
                case "20240802534757774693896193":
                    return "price";
                case "20240724531834877453144065":
                    return "profit";
                case "20240724531834973125218305":
                    return "Loss";
                case "20240726532219861997326337":
                    return "BOM";
                case "20240726532220167690784769":
                    return "assemble";
                case "20240522508668426953297921":
                    return "inquiry";
                case "20240522508671369697955841":
                    return "purchaseQuotation";
                case "904":
                    return "In";
                case "905":
                    return "out";
                case "101":
                    return "supplier";
                case "102":
                    return "customer";
                default:
                    break;
            }
        },
    },
    methods: {
        //发起流程
        launchProcess() {
            this.$refs.form.submit();
        },
        //暂存
        temporaryStorage() {
            this.$refs.form.temporaryStorage();
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
    border-top: 1px solid #e4e7ed;
    padding-right: 30px;
    padding: 5px;
}
.content_drawer {
    padding: 5px 0;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    .content_drawer_form {
        width: 85%;
        flex: 1;
    }
    .content_drawer_timeLine {
        width: 15%;
        .item_permission {
            font-size: 12px;
            color: #999;
        }
    }
    .el-form--label-left {
        width: 70%;
    }
}
</style>
